<template>
    <div>
        <el-table :data="tableDate"
                  v-loading="loading"
                  ref="edTable"
                  size="small"
                  @cell-mouse-enter="cellMouseenter"
                  @cell-mouse-leave="cellMouseLeave"
                  :row-key="params.rowKey"
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                  @selection-change="handleSelectionChange"
                  style="width: 100%;">
            <slot></slot>
            <template slot="empty">
                <img style="height: 200px;" src="../images/uiImages/none-data.png" alt="">
                <p style="margin-top: -55px" class="fontSize14">暂无数据</p>
            </template>
        </el-table>
        <div class="pagination">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :current-page.sync="page.page"
                    :page-size="page.pageSize"
                    :total="page.total"
                    @current-change="changePage">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {edTableRequest} from "src/api/resources";
    export default {
        name: "EdTable",
        props:{
            // 接口url
            api:{
                type: String,
                required: false,
            },
            params: {
                type: [Object, String, Number],
                default: function () {
                    return {
                        page: 1,
                        pageSize: 10
                    };
                }
            },
        },
        data(){
            return{
                page: {
                    page: 1,
                    pageSize: 10,
                    total: 0,
                    pages: 0,
                },
                tableDate:[],
                loading:false
            }
        },
        mounted(){
            if(this.api){
                this.query(this.params,this.api,'post')
            }
        },
        methods:{
            getTabledData(){
                return this.page.pages
            },
            query(data,url,r){
                edTableRequest(data,url,r).then(response => {
                    if(response.code == 20000) {
                        if(response.data.records){
                            this.tableDate = response.data.records;
                            this.page.total = response.data.total;
                            this.page.pages = response.data.pages;
                            this.$emit("setTableDate",response.data.records)
                        }else {
                            this.tableDate = response.data;
                            this.$emit("setTableDate",response.data)
                        }
                    }
                })
            },
            load(data){
                this.params.page = 1;
                this.params.pageSize = 10;
                this.$set(this.page,"page",1);
                this.params =  Object.assign(this.params,this.params,data);
                this.query(this.params,this.api,'post')
            },
            changePage(current) {
                this.params.page = current;
                this.query(this.params,this.api,'post')
            },
            handleSelectionChange(value){
                this.$emit("selectionData",value)
            },
            cellMouseenter(row, column, cell, event){
                this.$emit("cellMouseenterHover",row)
            },
            cellMouseLeave(row){
                this.$emit("cellMouseLeaveHover",row)
            }
        }
    }
</script>

<style scoped>

</style>